<template>
  <a-drawer 
    v-model:visible="visible" 
    :title="`设备周转详情 - ${dataDetail?.deviceName || ''}`" 
    :width="width >= 800 ? 800 : '100%'" 
    :footer="false"
  >
    <a-descriptions 
      :column="2" 
      size="large" 
      bordered
      class="general-description"
    >
      <!-- 基础信息 -->
      <a-descriptions-item label="设备名称">{{ dataDetail?.deviceName || '-' }}</a-descriptions-item>
      <a-descriptions-item label="设备类别">
        {{ getCategoryLabel(dataDetail?.category) }}
      </a-descriptions-item>
      
      <!-- 设备标识 -->
      <a-descriptions-item label="管理编号">{{ dataDetail?.managementId || '-' }}</a-descriptions-item>
      <a-descriptions-item label="型号">{{ dataDetail?.modelId || '-' }}</a-descriptions-item>
      
      <!-- 库存信息 -->
      <a-descriptions-item label="出厂编号">{{ dataDetail?.factoryId || '-' }}</a-descriptions-item>
      <a-descriptions-item label="计量单位">
        {{ getMeasureUnitLabel(dataDetail?.measureUnit) }}
      </a-descriptions-item>
      
      <!-- 状态信息 -->
      <a-descriptions-item label="库存数量">{{ dataDetail?.count || '0' }}</a-descriptions-item>
      <a-descriptions-item label="状态">{{ getStatusLabel(dataDetail?.status) }}</a-descriptions-item>
      
      <!-- 位置信息 -->
      <a-descriptions-item label="放置位置">{{ dataDetail?.location || '-' }}</a-descriptions-item>
      <a-descriptions-item label="使用人">{{ dataDetail?.nickname || '-' }}</a-descriptions-item>
      
      <!-- 时间信息 -->
      <a-descriptions-item label="使用时间">{{ formatDateTime(dataDetail?.useTime) }}</a-descriptions-item>
      <a-descriptions-item label="归还时间">{{ formatDateTime(dataDetail?.backTime) }}</a-descriptions-item>
      
      <!-- 任务信息 -->
      <a-descriptions-item label="关联任务">{{ dataDetail?.taskName || '-' }}</a-descriptions-item>
      <a-descriptions-item label="校准有效期">{{ formatDate(dataDetail?.checkoutDate) }}</a-descriptions-item>
      
      <!-- 报废信息 -->
      <a-descriptions-item label="报废时间">{{ formatDateTime(dataDetail?.scarpTime) }}</a-descriptions-item>
      
      <!-- 备注信息 -->
      <a-descriptions-item label="备注" :span="2">
        <div class="remark-content">{{ dataDetail?.remark || '无' }}</div>
      </a-descriptions-item>
      
      <!-- 创建信息 -->
      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString || '-' }}</a-descriptions-item>
      <a-descriptions-item label="更新人">{{ dataDetail?.updateUserString || '-' }}</a-descriptions-item>
      
      <a-descriptions-item label="创建时间">{{ formatDateTime(dataDetail?.createTime) }}</a-descriptions-item>
      <a-descriptions-item label="更新时间">{{ formatDateTime(dataDetail?.updateTime) }}</a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import { ref } from 'vue'
import dayjs from 'dayjs'
import { 
  type DeviceCirculationDetailResp,
  getDeviceCirculationDetail
} from '@/apis/generator/deviceCirculation'

const { width } = useWindowSize()

// 枚举值映射
const categoryMap: Record<number, string> = {
  0: '传感器',
  1: '仪器仪表',
  2: '动态采集系统',
  3: '信息化设备',
  4: '耗材',
  5: '其他设备'
}

const measureUnitMap: Record<number, string> = {
  0: '台',
  1: '支',
  2: '个'
}

const statusMap: Record<number, string> = {
  0: '归还',
  1: '在用',
  2: '外借',
  3: '报废'
}

// 枚举转换方法
const getCategoryLabel = (value?: number) => {
  return value !== undefined ? categoryMap[value] || value : '-'
}

const getMeasureUnitLabel = (value?: number) => {
  return value !== undefined ? measureUnitMap[value] || value : '-'
}

const getStatusLabel = (value?: number) => {
  return value !== undefined ? statusMap[value] || value : '-'
}

// 日期格式化
const formatDate = (dateString?: string | null): string => {
  return dateString ? dayjs(dateString).format('YYYY-MM-DD') : '-'
}

const formatDateTime = (dateString?: string | null): string => {
  return dateString ? dayjs(dateString).format('YYYY-MM-DD HH:mm:ss') : '-'
}

// 数据相关
const dataId = ref('')
const dataDetail = ref<DeviceCirculationDetailResp>()
const visible = ref(false)

// 查询详情
const fetchDataDetail = async () => {
  try {
    const response = await getDeviceCirculationDetail(dataId.value)
    dataDetail.value = response.data
  } catch (error) {
    console.error('获取设备周转详情失败:', error)
  }
}

// 打开抽屉
const open = async (id: string) => {
  dataId.value = id
  visible.value = true
  await fetchDataDetail()
}

defineExpose({ open })
</script>

<style scoped lang="scss">
.general-description {
  :deep(.arco-descriptions-item-label) {
    font-weight: 500;
    background-color: var(--color-fill-2);
    min-width: 120px;
  }
  
  :deep(.arco-descriptions-item-value) {
    color: var(--color-text-2);
  }
  
  .remark-content {
    white-space: pre-wrap;
    word-break: break-word;
  }
  
  /* 两列布局时调整间距 */
  :deep(.arco-descriptions-item) {
    padding: 12px 16px;
  }
}
</style>